<template>
  <div class="sell-page">
    <!-- 页面标题栏 - 增强视觉效果 -->

    <!-- 扫码区域 - 更专业的视觉呈现 -->
    <div class="scan-container">
      <div class="scan-frame">
        <!-- 扫码框视觉元素 -->
        <div class="scan-mask">
          <div class="scan-viewfinder">
            <div class="scan-line"></div>
            <div class="corner top-left"></div>
            <div class="corner top-right"></div>
            <div class="corner bottom-left"></div>
            <div class="corner bottom-right"></div>
          </div>
          <div class="scan-hint">将ISBN码对准扫描框</div>
        </div>
      </div>
      <van-button round type="primary" @click="startScan" class="scan-btn">
        <van-icon name="scan" class="icon" /> 开始扫码
      </van-button>
    </div>

    <!-- 书籍信息卡片 - 更专业的展示样式 -->
    <div class="book-card" v-if="scannedBook">
      <div class="book-header">
        <h3 class="book-title">{{ scannedBook.title }}</h3>
        <van-tag type="info" class="book-condition">待估价</van-tag>
      </div>
      <div class="book-details">
        <p><span class="label">作者:</span> {{ scannedBook.author }}</p>
        <p><span class="label">预估价格:</span> ¥{{ scannedBook.price.toFixed(2) }}</p>
        <p><span class="label">收购状态:</span> <van-tag round type="success">可收购</van-tag></p>
      </div>
      
      <!-- 操作按钮组 -->
      <div class="book-actions">
        <van-button type="default" round @click="resetScan">重新扫描</van-button>
        <van-button type="success" round @click="submitBook">确认提交</van-button>
      </div>
    </div>

    <!-- 卖书指南提示 -->
    <div class="sell-guide" v-if="!scannedBook">
      <van-cell title="卖书流程" is-link @click="showGuide">
        <template #icon>
          <van-icon name="info-o" color="#8b4513" />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { showToast, showDialog } from 'vant';

export default {
  data() {
    return {
      scannedBook: null, // 存储扫码后获取的书籍信息
      books: [
        { title: "经济学原理", author: "N·格里高利·曼昆" },
        { title: "JavaScript高级程序设计", author: "马特·弗里斯比" },
        { title: "百年孤独", author: "加西亚·马尔克斯" },
        { title: "人类简史", author: "尤瓦尔·赫拉利" },
        { title: "活着", author: "余华" },
        { title: "围城", author: "钱钟书" },
        { title: "三体", author: "刘慈欣" },
        { title: "平凡的世界", author: "路遥" },
        { title: "Python编程", author: "埃里克·马瑟斯" },
        { title: "追风筝的人", author: "卡勒德·胡赛尼" },
        { title: "小王子", author: "安托万·德·圣埃克苏佩里" },
        { title: "白夜行", author: "东野圭吾" }
      ]
    };
  },
  methods: {
    // 从books数组中随机选择一本书
    getRandomBook() {
      return this.books[Math.floor(Math.random() * this.books.length)];
    },
    // 生成随机价格
    generateRandomPrice() {
      return Math.random() * 50 + 30;
    },
    // 模拟扫码功能
    startScan() {
      // 模拟扫码加载效果
      showToast({
        message: '正在扫描...',
        icon: 'loading',
        duration: 1000,
        forbidClick: true
      });

      // 1秒后显示结果
      setTimeout(() => {
        const randomBook = this.getRandomBook();
        this.scannedBook = {
          title: randomBook.title,
          author: randomBook.author,
          price: this.generateRandomPrice(),
        };
        showToast('扫码成功，已获取书籍信息');
      }, 1000);
    },
    // 重置扫描
    resetScan() {
      this.scannedBook = null;
      showToast('已重置扫描状态');
    },
    // 提交卖书信息
    submitBook() {
      showDialog({
        title: '确认提交',
        message: `您确定要出售《${this.scannedBook.title}》吗？预估价格为¥${this.scannedBook.price.toFixed(2)}`,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        showToast({
          message: '卖书信息已提交，等待审核',
          icon: 'success',
          duration: 1500
        });
        setTimeout(() => {
          this.scannedBook = null;
        }, 1500);
      });
    },
    // 显示卖书指南
    showGuide() {
      showDialog({
        title: '卖书流程指南',
        message: `1. 扫描书籍背面的ISBN条形码
									2. 确认书籍信息及预估价格
									3. 提交卖书申请
									4. 等待工作人员审核
									5. 审核通过后即可完成交易`,
        confirmButtonText: '我知道了'
      });
    }
  },
};
</script>

<style lang="less" scoped>
.sell-page {
  background-color: #f9f5ed;
  min-height: 100vh;
  padding-bottom: 20px;
	padding-top: 46px;
}

// 扫码区域样式
.scan-container {
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scan-frame {
  width: 280px;
  height: 280px;
  position: relative;
  margin-bottom: 30px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 16px;
  overflow: hidden;
}

.scan-mask {
  width: 100%;
  height: 100%;
  position: relative;
}

.scan-viewfinder {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #00e400;
  background-color: rgba(0, 0, 0, 0.2);
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #00e400;
  animation: scan 2s infinite linear;
}

.corner {
  width: 20px;
  height: 20px;
  position: absolute;
  border-color: #00e400;
  border-style: solid;
  background-color: transparent;
}

.top-left {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.top-right {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0;
}

.bottom-left {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px;
}

.bottom-right {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.scan-hint {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 14px;
}

.scan-btn {
  width: 200px;
  height: 48px;
  font-size: 16px;
  
  .icon {
    margin-right: 8px;
  }
}

// 书籍信息卡片样式
.book-card {
  background-color: white;
  border-radius: 12px;
  padding: 18px;
  margin: 0 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.book-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.book-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.book-condition {
  background-color: #f5f5f5;
  color: #8b4513;
}

.book-details {
  margin-bottom: 20px;
  
  p {
    margin: 10px 0;
    color: #666;
    font-size: 15px;
  }
  
  .label {
    display: inline-block;
    width: 80px;
    color: #999;
  }
}

.book-actions {
  display: flex;
  gap: 15px;
  
  .van-button {
    flex: 1;
    height: 46px;
    font-size: 16px;
  }
}

// 卖书指南样式
.sell-guide {
  margin: 0 20px;
  margin-top: 20px;
  
  ::v-deep .van-cell {
    background-color: white;
    border-radius: 12px;
  }
}

// 扫描线动画
@keyframes scan {
  0% {
    top: 0;
  }
  50% {
    top: calc(100% - 2px);
  }
  100% {
    top: 0;
  }
}
</style>